<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短剧搜索小工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <?php include 'includes/navbar.php'; ?>
    <div class="container mt-5">
        <div class="card">
            <h2 class="mb-4 text-center">短剧搜索小工具</h2>
            <form id="searchForm">
                <div class="mb-3">
                    <label for="movieName" class="form-label">短剧名称</label>
                    <input type="text" class="form-control" id="movieName" name="movieName" required placeholder="请输入短剧名称">
                </div>
                <button type="submit" class="btn btn-primary w-100">搜索</button>
            </form>
            <div id="result" class="mt-3"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
    <script>
        document.getElementById('searchForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var movieName = document.getElementById('movieName').value;

            if (!sessionStorage.getItem('isLoggedIn')) {
                window.location.href = 'login.html';
                return;
            }

            fetch('short-movie-search.php?wd=' + encodeURIComponent(movieName), {
                method: 'GET'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok.');
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 0) {
                    var resultHtml = '<div class="alert alert-success" role="alert">';
                    resultHtml += '<h4 class="alert-heading">搜索结果</h4>';
                    resultHtml += '<ul class="list-group">';
                    data.data.forEach(function(movie) {
                        resultHtml += '<li class="list-group-item">';
                        resultHtml += '<h5>' + movie.title + '</h5>';
                        resultHtml += '<p>' + movie.url + '</p>';
                        resultHtml += '</li>';
                    });
                    resultHtml += '</ul>';
                    resultHtml += '</div>';
                    document.getElementById('result').innerHTML = resultHtml;
                } else {
                    document.getElementById('result').innerHTML = '<div class="alert alert-danger" role="alert">' + data.msg + '</div>';
                }
            })
            .catch(error => {
                document.getElementById('result').innerHTML = '<div class="alert alert-danger" role="alert">请求失败: ' + error.message + '</div>';
            });
        });
    </script>
</body>
</html>